<script setup lang="ts">
import { onMounted, ref } from "vue";
import { useRoute } from "vue-router";
import { storeToRefs } from "pinia";
import { OrderType } from "@/enum";
import type { RouteLocationNormalized } from "vue-router";
import useConsultStore from "@/pinia/modules/consultStore.ts";
import { getConsultFlagText, getIllnessTimeText } from "@/utils/index.ts";
import DetailButton from "@/components/lib/DetailButton.vue";
import PaySheet from "@/components/lib/paySheet.vue";

const consultStore = useConsultStore();

const route: RouteLocationNormalized = useRoute();

const { orderDetail } = storeToRefs(consultStore);


const showSheet = ref<boolean>(false);

onMounted(() => {
    consultStore.fetchConsultOrderDetail(route.params.id as string);
});

</script>

<template>
    <div class="consult-detail-page" v-if="orderDetail.id">
        <nav-bar title="问诊详情" left-arrow left-text="返回" @click-left="$router.back()"></nav-bar>
        <div class="detail-head">
            <div class="text">
                <h3>图文问诊 {{ orderDetail.payment }} 元</h3>
                <span class="sta" :class="{ orange: orderDetail.status === OrderType.ConsultPay, green: orderDetail.status === OrderType.ConsultChat}"
                >{{ orderDetail.statusValue }}</span>
                <p class="tip">服务医生信息</p>
            </div>
            <div class="card">
                <img class="avatar" src="@/assets/images/avatar-doctor.svg" alt="" />
                <p class="doc">
                    <span>极速问诊</span>
                    <span>{{ orderDetail?.docInfo?.name }}</span>
                </p>
                <van-icon name="arrow" />
            </div>
        </div>
        <div class="detail-patient">
            <van-cell-group :border="false">
                <van-cell title="患者信息" :value="`${orderDetail.patientInfo.name} | ${orderDetail.patientInfo.genderValue} | ${orderDetail.patientInfo.age}岁`" />
                <van-cell title="患病时长" :value="getIllnessTimeText(orderDetail.illnessTime)" />
                <van-cell title="就诊情况" :value="getConsultFlagText(orderDetail.consultFlag)" />
                <van-cell title="病情描述" :label="orderDetail.illnessDesc" />
            </van-cell-group>
        </div>
        <div class="detail-order">
            <h3>订单信息</h3>
            <van-cell-group :border="false">
                <van-cell title="订单编号">
                    <template #value>
                        <span class="copy">复制</span>
                        {{ orderDetail.orderNo }}
                    </template>
                </van-cell>
                <van-cell title="创建时间" :value="orderDetail.createTime" />
                <van-cell title="应付款" :value="`￥${orderDetail.payment}`" />
                <van-cell title="优惠券" :value="`-￥${orderDetail.couponDeduction}`" />
                <van-cell title="积分抵扣" :value="`-￥${orderDetail.pointDeduction}`" />
                <van-cell title="实付款" :value="`￥${orderDetail.actualPayment}`" class="price" />
            </van-cell-group>
        </div>
        <div class="detail-time">
            <span>请在</span>
            <van-count-down :time="10000 * 1000" />
            <span>内完成支付，超时订单将取消</span>
        </div>
        <div class="detail-action van-hairline--top">
            <div class="price">
                <span>需付款</span>
                <span>￥{{ orderDetail.payment }}</span>
            </div>
            <detail-button :item="orderDetail" @openSheet="showSheet=$event"></detail-button>
        </div>

        <pay-sheet pay-callback="http://localhost:80/consult/chitchat" v-model:show-sheet="showSheet" :order-id="orderDetail.id" :actual-payment="orderDetail.actualPayment" @clearOrderId="orderDetail.id=''"></pay-sheet>

    </div>

    <div class="consult-detail-page" v-else>
        <nav-bar title="问诊详情" left-arrow left-text="返回" @click-left="$router.back()"></nav-bar>
        <van-skeleton title :row="4" style="margin-top: 30px" />
        <van-skeleton title :row="4" style="margin-top: 30px" />
    </div>
</template>

<style lang="scss" scoped>
.consult-detail-page {
    padding-bottom: 120px;

    .detail-head {
        height: 140px;
        position: relative;

        &::before {
            content: '';
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 135px;
            background: linear-gradient(180deg, rgba(44, 181, 165, 0), rgba(44, 181, 165, 0.2));
            border-bottom-left-radius: 150px 20px;
            border-bottom-right-radius: 150px 20px;
        }

        padding: 15px;

        .text {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            padding: 10px 3px;

            .sta {
                color: var(--cp-tag);
                font-weight: 500;
                font-size: 16px;

                &.green {
                    color: var(--cp-primary);
                }

                &.orange {
                    color: #f2994a;
                }
            }

            .tip {
                width: 100%;
                color: var(--cp-text3);
                margin-top: 5px;
            }
        }

        .card {
            height: 74px;
            background-color: #fff;
            border-radius: 8px;
            position: relative;
            display: flex;
            align-items: center;
            padding: 0 15px;
            box-shadow: 0px 0px 22px 0px rgba(229, 229, 229, 0.5);

            .avatar {
                width: 38px;
                height: 38px;
            }

            .doc {
                flex: 1;
                padding-left: 15px;

                > span {
                    display: block;
                    font-size: 16px;

                    &:last-child {
                        font-size: 13px;
                        color: var(--cp-text3);
                    }
                }
            }

            .van-icon {
                color: var(--cp-tip);
            }
        }
    }

    .detail-patient {
        &::after {
            content: '';
            display: block;
            height: 12px;
            background-color: var(--cp-bg);
        }
    }

    .detail-order {
        > h3 {
            padding: 10px 18px;
            font-weight: normal;
        }

        .copy {
            padding: 2px 10px;
            border: 1px solid var(--cp-primary);
            background-color: var(--cp-plain);
            color: var(--cp-primary);
            font-size: 12px;
            border-radius: 12px;
            margin-right: 10px;
        }

        :deep(.van-cell__title) {
            width: 70px;
            flex: none;
        }

        .price :deep(.van-cell__value) {
            font-size: 16px;
            color: var(--cp-price);
        }
    }

    .detail-action {
        height: 65px;
        width: 100%;
        position: fixed;
        left: 0;
        bottom: 0;
        display: flex;
        align-items: center;
        justify-content: space-between;
        background-color: #fff;

        padding: 0 15px;
        box-sizing: border-box;

        .price {
            flex: 1;
            padding-bottom: 10px;

            > span:last-child {
                font-size: 18px;
                color: var(--cp-price);
                padding-left: 5px;
            }
        }

        .van-button {
            margin-left: 10px;
            padding-left: 17px;
            padding-right: 17px;
        }

        :deep(.van-button--default) {
            background-color: var(--cp-bg);
            color: var(--cp-text3);
        }
    }

    .van-cell {
        padding-left: 18px;
        padding-right: 18px;
    }

    .detail-time {
        position: fixed;
        left: 0;
        bottom: 65px;
        width: 100%;
        height: 44px;
        background-color: #fff7eb;
        text-align: center;
        line-height: 44px;
        font-size: 13px;
        color: #f2994a;

        .van-count-down {
            display: inline;
            color: #f2994a;
        }
    }
}
</style>
